import React from "react";
import PropTypes from "prop-types";
import {Col, Form, Input, Row} from "antd";
const FormItem = Form.Item;

class SearchFormAdvanced extends React.Component {
    static propTypes = {
        fields: PropTypes.array,
        btns: PropTypes.array
    }

    constructor(props) {
        super(props)
    }

    state = {
        expand: false,
    };

    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log('Received values of form: ', values);
        });
    }

    handleReset = () => {
        this.props.form.resetFields();
    }

    toggle = () => {
        const { expand } = this.state;
        this.setState({ expand: !expand });
    }

    // To generate mock Form.Item
    getFields() {
        const { fields } = this.props;
        const minSize = fields.length <= 6 ? fields.length : 6;
        const maxSize = fields.length
        const count = this.state.expand ? maxSize : minSize
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const children = [];
        console.log('count is ', count)
        for (let i = 0; i < maxSize; i++) {
            const field = fields[i]
            children.push(
                <Col span={6} key={i}>
                    <FormItem {...formItemLayout} label={field.label}>
                        {getFieldDecorator(field.key)(
                            <Input placeholder="placeholder" />
                        )}
                    </FormItem>
                </Col>
            );
        }
        return children;
    }

    render() {
        return (
            <Form
                onSubmit={this.handleSearch}
            >
                <Row gutter={40}>
                    {
                        this.getFields()
                    }
                    {
                        this.getBtns()
                    }
                </Row>
            </Form>
        );
    }
}

export default Form.create()(SearchFormAdvanced);